<template>
  <div class="right">
    <!-- 智能辅助运输 -->
    <data-box
      wd="29.375rem"
      class="assist-transport"
      title="智能辅助运输"
      :bg="box_header_standard"
      he="2.6875rem"
    >
      <template slot="content">
        <div class="content">
          <div class="content-left">
            <SubTitle
              style="margin-top: 0.7813rem"
              title="当月井下车辆统计"
              wd="100%"
              he="1.5rem"
              :num="[22]"
              unit="辆"
              theme-one="#00F6F8"
            />

            <div class="chart-box" style="height: 7.5625rem">
              <JadeChart
                class="chart"
                style="height: 100% "
                :data="JadeJueChartData"
                :color="JadeJueChartOption.color"
                :text="JadeJueChartOption.text"
                :showLegend="false"
              />
              <Legend
                style="margin-top: 1.5rem;height: 5.75rem"
                class="legend"
                shape="dot"
                wd="0.435rem"
                he="0.435rem"
                unit=""
                itemWidth="100%"
                itemHeight="1.5rem"
                :legend="legend"
              />
            </div>
          </div>
          <div class="content-right">
            <SubTitle
              style="margin-top: 0.7813rem"
              title="近7天车辆运行效率趋势"
              wd="100%"
              he="1.5rem"
              :num="[95]"
              unit="%"
              theme-one="#00F6F8"
            />
            <LineChart
              style="margin-top: 0.8125rem; height: 7.5625rem"
              class="chart"
              :chart-data="chartTimeData"
              :area="lineChartOption.area"
              :unit="lineChartOption.unit"
              :color="lineChartOption.color"
              :text="['智能辅助运输']"
            />
          </div>
        </div>
      </template>
    </data-box>

    <!-- 智能防冲 -->
    <data-box
      wd="29.375rem"
      class="anti-scour-box"
      title="智能防冲"
      :bg="box_header_standard"
      he="2.6875rem"
    >
      <template slot="content">
        <div class="content" style="margin-top: 0.4063rem">
          <div class="content-left">
            <div
              class="anti-scour-item"
              v-for="(item, index) in antiScourList"
              :key="index"
            >
              <div class="item">
                <img class="icon" :src="item.icon" alt="" />
                <div class="right">
                  <span
                    :class="
                      item.status == 0
                        ? 'anti-scour-default'
                        : 'anti-scour-active'
                    "
                  >
                    {{ item.status == 0 ? "异常" : "正常" }}</span
                  >
                  <span class="title">{{ item.title }}</span>
                </div>
              </div>
              <img
                v-if="index === 0"
                class="anti_line"
                src="../../../assets/img/decisionAnalysis/anti_line.png"
                alt=""
              />
            </div>
          </div>
          <div class="content-right">
            <SubTitle
              title="当前应力最大/最小"
              wd="100%"
              he="1.1875rem"
              :num="[6]"
              unit="MPa"
              theme-one="#00F6F8"
            />
            <BarChart
              style="height: 8.4375rem; margin-top: 0.8125rem"
              :barWidth="8"
              class="chart"
              :data="chartTimeData"
              :area="powerChartOption.area"
              :unit="powerChartOption.unit"
              :color="powerChartOption.color"
              text="智能辅助运输"
            />
          </div>
        </div>
      </template>
    </data-box>

    <!-- 智能水文监测 -->
    <data-box
      wd="29.375rem"
      class="hydrology-box"
      title="智能水文监测"
      :bg="box_header_standard"
      he="2.6875rem"
    >
      <template slot="content">
        <div class="content">
          <div class="content-left">
            <div class="hydrology-status">
              <img
                src="../../../assets/img/decisionAnalysis/anti_scour_icon.png"
                alt=""
              />
              <div class="right">
                <span
                  :class="
                    hydrologyStatus == 0
                      ? 'hydrology-default'
                      : 'hydrology-active'
                  "
                >
                  {{ hydrologyStatus == 0 ? "异常" : "正常" }}</span
                >
                <span class="title">水文监测</span>
              </div>
            </div>
            <div
              class="hydrology-list"
              v-for="(item, index) in hydrologyList"
              :key="index"
            >
              <span class="left">{{ item.title }}</span>
              <div class="data">
                <span class="num">{{ item.num }}</span>
                <span class="unit">{{ item.unit }}</span>
              </div>
            </div>
          </div>
          <div class="content-right">
            <SubTitle title="涌水/排水量" wd="100%" he="1.5rem" />
            <LineChart
              style="height: 9.125rem; margin-top: 0.8125rem"
              class="chart"
              :chart-data="hydrologyChartData"
              :area="lineChartOption.area"
              :unit="lineChartOption.unit"
              :color="lineChartOption.color"
              :showLegend="true"
              :text="['智能水文监测']"
            />
          </div>
        </div>
      </template>
    </data-box>

    <!-- 智能环保 -->
    <data-box
      wd="29.375rem"
      class="ep-box"
      title="智能环保"
      :bg="box_header_standard"
      he="2.6875rem"
    >
      <template slot="content">
        <div class="content">
          <div class="ep-list" v-for="(item, index) in epList" :key="index">
            <div class="icon_box">
              <span class="title">{{ item.title }}</span>
            </div>
            <div class="top">
              <span class="top-title">{{ item.topTitle }}</span>
              <div class="data">
                <span class="num">{{ item.topNum }}</span>
                <span class="unit">{{ item.topUnit }}</span>
              </div>
            </div>
            <div class="bottom">
              <span class="bottom-title">{{ item.bottomTitle }}</span>
              <div class="data">
                <span class="num">{{ item.bottomNum }}</span>
                <span class="unit">{{ item.bottomUnit }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </data-box>
  </div>
</template>

<script>
import DataBox from '../lib/dataBox.vue';
import SubTitle from '../lib/subTitle.vue';
import LineChart from '@/components/chart/cockpit/LineChart';
import JadeChart from '@/components/chart/cockpit/JadeChart.vue';
import BarChart from '@/components/chart/cockpit/BarChart.vue';
import Legend from '@/components/chart/cockpit/Legend.vue';

export default {
  name: 'DafosiControlWebRight',
  components: { DataBox, SubTitle, LineChart, JadeChart, BarChart, Legend },
  data() {
    return {
      box_header_standard: require('../../../assets/img/decisionAnalysis/box_header_standard.png'),
      chartTimeData: [
        { x: '12-01', y: 75, s: '运行时长' },
        { x: '12-06', y: 30, s: '运行时长' },
        { x: '12-11', y: 60, s: '运行时长' },
        { x: '12-16', y: 37, s: '运行时长' },
        { x: '12-21', y: 79, s: '运行时长' },
        { x: '12-26', y: 42, s: '运行时长' },
        { x: '12-31', y: 67, s: '运行时长' }
      ],
      lineChartOption: {
        color: ['#00fdff', '#a2b9fd'],
        area: true,
        unit: 'm³'
      },
      JadeJueChartData: [
        { type: '人车', value: 4 },
        { type: '工程车', value: 8 },
        { type: 'BDT', value: 10 }
      ],
      legend: [
        { name: '人车', value: 4, color: '#00fdff' },
        { name: '工程车', value: 8, color: '#1662ff' },
        { name: 'BDT', value: 10, color: '#a2b9fd' }
      ],
      JadeJueChartOption: {
        color: ['#00fdff', '#1662ff', '#a2b9fd'],
        text: `车辆\n类型`
      },
      powerChartOption: {
        color: ['#00FDFF'],
        area: true,
        unit: 'MPa'
      },
      antiScourList: [
        {
          icon: require('../../../assets/img/decisionAnalysis/anti_scour_icon.png'),
          title: '微震监测',
          status: 0
        },
        {
          icon: require('../../../assets/img/decisionAnalysis/anti_scour_icon.png'),

          title: '应力监测',
          status: 1
        }
      ],
      hydrologyChartData: [
        { x: '12-01', y: 75, s: '涌水量' },
        { x: '12-01', y: 30, s: '排水量' },
        { x: '12-02', y: 60, s: '涌水量' },
        { x: '12-02', y: 37, s: '排水量' },
        { x: '12-03', y: 79, s: '涌水量' },
        { x: '12-03', y: 42, s: '排水量' }
      ],
      hydrologyStatus: 1,
      hydrologyList: [
        {
          num: 440,
          title: '瞬时涌水量',
          unit: 'm³/h'
        },
        {
          num: 12584,
          title: '今日排水量',
          unit: 'm³'
        }
      ],
      epList: [
        {
          title: '采区沉降',
          topTitle: '沉降面积',
          topNum: '78.99',
          topUnit: '公里',
          bottomTitle: '吨煤沉降率',
          bottomNum: '8.3',
          bottomUnit: '%'
        },
        {
          title: '采区沉降',
          topTitle: '沉降面积',
          topNum: '78.99',
          topUnit: '公里',
          bottomTitle: '吨煤沉降率',
          bottomNum: '8.3',
          bottomUnit: '%'
        },
        {
          title: '采区沉降',
          topTitle: '沉降面积',
          topNum: '78.99',
          topUnit: '公里',
          bottomTitle: '吨煤沉降率',
          bottomNum: '8.3',
          bottomUnit: '%'
        }
      ]
    };
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
// 智能辅助运输
.assist-transport {
  .content {
    display: flex;
    justify-content: space-between;
    .content-left {
      width: 13.125rem;
      .chart-box {
        display: flex;
        justify-content: space-between;
        .chart {
          width: 5rem;
        }
        .legend {
          overflow-y: auto;
          margin-left: 0.625rem;
          flex: 1;
          padding-right: 0.5rem;
        }
      }
    }
    .content-right {
      flex: 1;
      margin-left: 1.25rem;
    }
  }
}
// 智能防冲
.anti-scour-box {
  margin-top: 0.9688rem;
  .content {
    display: flex;
    justify-content: space-between;
    .content-left {
      width: 8.8125rem;
      .anti-scour-item {
        .item {
          display: flex;
          // align-items: center;
          .icon {
            width: 3.875rem;
            vertical-align: middle;
          }
          .right {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: 0.875rem;
            .anti-scour-default,
            .anti-scour-active {
              height: 1rem;
              font-size: 1rem;
              line-height: 1;
              font-family: PingFang SC, PingFang SC-Bold;
              font-weight: 500;
              text-align: left;
              letter-spacing: 0.0938rem;
            }
            .anti-scour-active {
              color: #35ffc0;
            }
            .anti-scour-default {
              color: #a2a7ba;
            }
            .title {
              height: 0.75rem;
              font-size: 0.75rem;
              line-height: 1;
              margin-top: 0.625rem;
            }
          }
        }
        .anti_line {
          margin-top: 1.25rem;
          width: 100%;
          height: 0.0625rem;
        }
        &:first-of-type {
          margin-top: 10.5px;
        }
        &:last-of-type {
          margin-top: 1.4375rem;
        }
      }
    }
    .content-right {
      width: 16.75rem;
      margin-right: 1.25rem;
    }
  }
}
// 智能水文监测
.hydrology-box {
  margin-top: 0.9688rem;
  .content {
    display: flex;
    justify-content: space-between;
    &-left {
      width: 8.875rem;
      margin-top: 2.0194rem;
      .hydrology-status {
        display: flex;
        .right {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 0.8125rem;
          .hydrology-default,
          .hydrology-active {
            height: 1rem;
            font-size: 1rem;
            line-height: 1;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 500;
            text-align: left;
            letter-spacing: 0.0938rem;
          }
          .hydrology-active {
            color: #35ffc0;
          }
          .hydrology-default {
            color: #a2a7ba;
          }
          .title {
            margin-top: 0.6875rem;
            height: 0.75rem;
            font-size: 0.75rem;
            line-height: 1;
          }
        }
      }
      .hydrology-list {
        width: 8.875rem;
        height: 2.375rem;
        margin-top: 1.25rem;
        background-color: rgba($color: #fff, $alpha: 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          height: 0.75rem;
          font-size: 0.75rem;
          line-height: 1;
          margin-left: 0.625rem;
        }
        .data {
          .num {
            color: #01f9fb;
            height: 1.125rem;
            font-size: 1.125rem;
            line-height: 1;
            font-family: Agency FB, Agency FB-Regular;
          }
          .unit {
            height: 0.6875rem;
            font-size: 0.6875rem;
            line-height: 1;
            margin-left: 0.1875rem;
            margin-right: 0.375rem;
            color: #b1b3b8;
            font-family: PingFang SC, PingFang SC-Regular;
          }
        }
      }
      // .hydrology-list:last-of-type {
      //   margin-top: 1.25rem;
      // }
    }
    &-right {
      margin-top: 0.8438rem;
      margin-left: 2rem;
      width: 16.5rem;
    }
  }
}
// 智能环保
.ep-box {
  margin-top: 1.1563rem;
  .content {
    display: flex;
    .ep-list {
      display: flex;
      flex-direction: column;
      // align-items: center;
      // justify-content: center;
      margin-top: 0.2813rem;
      width: 8.625rem;
      height: 11.4375rem;
      background-image: url("../../../assets/img/decisionAnalysis/ep_border_standard.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      &:not(:first-of-type) {
        margin-left: 0.6875rem;
      }
    }
    .icon_box {
      align-self: center;
      margin-top: 0.9375rem;
      width: 5.75rem;
      height: 3.4375rem;
      position: relative;
      text-align: center;
      background-image: url("../../../assets/img/decisionAnalysis/ep_icon_standard.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .title {
        font-size: 0.75rem;
        line-height: 1;
        height: 0.75rem;
        position: absolute;
        top: 10%;
        width: max-content;
        transform: translate(-50%, -50%);
      }
    }
    .top,
    .bottom {
      margin-left: 1.3125rem;
      .top-title,
      .bottom-title {
        height: 0.75rem;
        font-size: 0.75rem;
        line-height: 1;
        font-family: PingFang SC, PingFang SC-Medium;
      }
      .data {
        margin-top: 0.375rem;
        .num {
          font-size: 1.375rem;
          height: 1.375rem;
          line-height: 1;
        }
        .unit {
          font-size: 0.75rem;
          height: 0.75rem;
          line-height: 1;
          margin-left: 0.5rem;
        }
      }
    }

    .top {
      .data {
        color: #fedb80;
      }
    }
    .bottom {
      margin-top: 0.5625rem;
      .data {
        color: #00f6ff;
      }
    }
  }
}
</style>
